<template>
	<div class="container" style="">
		<van-nav-bar title="预约" left-arrow @click-left="$router.back()" fixed>
			<template #right>
				<icon-svg name="select" class="icon" :size="20" @click="openSearch" />
			</template>
		</van-nav-bar>
		<div class="flex-scroll">
			<van-list
				v-model:loading="loading"
				loading-text="加载中..."
				@load="onLoad"
				:finished="finished"
				:offset="46"
			>
				<template #default>
					<van-swipe-cell v-for="(item, index) in list" :key="index">
						<div class="item">
							<van-image round width="80" height="80" :src="item.cus_img" />
							<div class="right">
								<div class="left_text">
									<div class="left_text_top">
										<span style="width: 100%;"
											><i class="gray">客户昵称：</i>{{ item.cus_name }}</span
										>
										<span>
											<i class="gray">客户类型：</i>
											<van-tag
												:type="item.cus_type == 1 ? 'primary' : 'success'"
												>{{ item.cus_type == 1 ? "新客" : "老客" }}</van-tag
											>
										</span>
										<span><i class="gray">品牌：</i>{{ item.bra_name }}</span>
										<span
											><i class="gray">预约状态：</i>
											{{
												statusData.filter(
													ite => ite.value == item.status
												)[0]?.label
											}}</span
										>
										<span>
											<i class="gray">客服到店：</i>
											<i
												:class="{
													red: !item.order_user_arrived,
													blue: item.order_user_arrived
												}"
												>{{ item.order_arrived }}</i
											>
										</span>
									</div>

									<span class="ellipsis"
										><i class="gray">预约门店：</i>{{ item.dept_name }}</span
									>
									<span
										><i class="gray">预约人员：</i
										>{{ item.add_user_name }}</span
									>
									<span
										><i class="gray">预约时间：</i
										><i style="color: red;">{{ item.appoint_date }}</i></span
									>
									<span class="ellipsis"
										><i class="gray">预约备注：</i
										>{{ item.remarks || "-" }}</span
									>
								</div>
							</div>
						</div>
						<template #right>
							<div
								style="display: flex;flex-direction: column;justify-content: space-around;width: auto;height: 100%;"
							>
								<van-button
									type="primary"
									v-if="![2, 4, 6, 7].includes(item.status)"
									@click="openAppoint(item)"
									text="改约"
								/>

								<van-button
									:type="item.order_user_arrived === 0 ? `danger` : ``"
									@click="arrived(item)"
									v-if="item.status == 1"
									type="danger"
									:text="item.order_user_arrived === 0 ? `客服到店` : `取消到店`"
								/>
							</div>
						</template>
					</van-swipe-cell>
					<cl-empty v-if="!loading && !list.length" tips="暂无数据"></cl-empty>
				</template>
			</van-list>
		</div>
		<PopSelect ref="popSelectRef" @resetSearch="resetSearch" :bizRefData="bizRefData" />
		<EditPop ref="editPopRef" @success="resetSearch" />
	</div>
</template>

<script>
import dayjs from "dayjs";
import EditPop from "./editPop.vue";
import PopSelect from "./popSelect.vue";
export default {
	components: {
		PopSelect,
		EditPop
	},
	data() {
		return {
			list: [],
			loading: false,
			finished: false,
			error: false,
			statusData: [
				{ label: "待服务", value: 1 },
				{ label: "已开单", value: 2 },
				{ label: "已流失", value: 7 },
				{ label: "流失中", value: 6 }
			],
			search: {
				search_content: "",
				biz_id: "", //必填
				company_id: "",
				bra_id: [],
				dept_id: [], //所属
				city_id: "",
				after_dept_id: [],
				order_date_id_user: "",
				status: 1,
				btime: dayjs().format("YYYY-MM-DD"),
				etime: dayjs().format("YYYY-MM-DD"),
				search_type: 6,
				is_undetermined: 2,
				cus_type: 0,
				user_id: "",
				appoint_dept_id: [],
				keyword_type: 4 //关键字搜索类型
			},
			pages: {
				size: 10,
				page: 0
			}
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.search;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.search.biz_id = this.getCurrBiz();
	},
	methods: {
		onLoad() {
			// 异步更新数据
			this.pages.page++;
			this.getList();
		},
		async getList() {
			this.loading = true;
			await this.$service.cart
				.page({
					...this.pages,
					...this.search
				})
				.then(res => {
					console.log(res.list, "res.list");

					this.list.push(...res.list);
					if (!res.list.length) {
						this.finished = true;
					} else {
						this.finished = false;
					}
				})
				.catch(err => {
					console.error("请求失败:", err);
					this.loading = false;
					this.finished = true;
				});
			this.loading = false;
		},
		openSearch() {
			this.$refs.popSelectRef.open();
			this.$nextTick(() => {
				this.$refs.popSelectRef.setData(this.search);
			});
		},
		resetSearch(data) {
			this.search = { ...this.search, ...data };
			this.pages.page = 1;
			this.list = [];
			this.loading = true;
			this.getList();
		},
		// 改约、
		openAppoint(row) {
			this.$refs.editPopRef.open();
			this.$nextTick(() => {
				this.$refs.editPopRef.setData(row);
			});
		},
		async arrived(item) {
			await this.$service.cart.arrived({ cart_id: item.cart_id });
			this.$message.success("操作成功");
			this.resetSearch(false);
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding-top: 46px;
	font-size: 14px;
}

.ellipsis {
	white-space: nowrap;
	/* 不换行 */
	overflow: hidden;
	/* 超出隐藏 */
	text-overflow: ellipsis;
	/* 添加省略号 */
}

.flex-scroll {
	height: calc(100% - 46px);
	overflow-y: auto;
}
.blue {
	color: #156dff;
}
.red {
	color: red;
}
.van-swipe-cell {
	border-radius: 10px;
	margin: 10px;

	box-shadow: 0 2px 8px rgba(128, 128, 128, 0.3);

	.item {
		display: flex;
		align-items: center;
		padding: 10px;

		.right {
			flex: 1;
			display: flex;
			align-items: center;
			margin-left: 20px;
			line-height: 26px;

			.left_text {
				display: flex;
				flex-direction: column;

				.left_text_top {
					display: flex;
					flex-wrap: wrap;

					span {
						width: 50%;
					}
				}
			}
		}
	}
}

::v-deep .van-tag {
	width: auto !important;
}

i {
	font-style: normal;
}

.gray {
	color: #c1c1c1;
	display: inline-block;
	// width: 7;
}
</style>
